<template>
	<view>
		<view class="m-bg-main">
			<!-- 轮播图片 -->
			<view v-if="slider.length > 0">
				<u-toast ref="uToast"></u-toast>
				<u-swiper height="380" :list="slider" border-radius="0" mode="round" :interval="3000" @click="openRulePage"></u-swiper>
			</view>

			<!-- 通知列表 -->
			<view class="u-p-t-20 u-p-b-20" v-if="notify.length > 0">
				<u-notice-bar mode="vertical" type="none" :is-circular="false" :list="notify" @click="openNotifyPage"></u-notice-bar>
			</view>
		</view>

		<!-- 常用功能 -->
		<view class="m-bg-main u-m-t-20" v-if="icons.length > 0">
			<u-grid :col="3">
				<u-grid-item v-for="item in icons" :key="item.id">
					<u-icon :name="item.icon" :size="46"></u-icon>
					<view class="grid-text">{{ item.title }}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 商品列表 -->
		<view class="u-m-t-20 u-p-20 m-bg-main">
			<view class="u-m-t-20"><u-icon name="arrow-right" label="推荐单品" color="red"></u-icon></view>
			<view class="u-m-t-20">
				<u-grid class="goods-main" :col="2" :border="false">
					<u-grid-item v-for="item in lists" :key="item.id" @click="openGoodsPage(item.code)">
						<view class="u-p-10 m-width-full u-text-center">
							<view class="goods-item">
								<u-image width="100%" height="300rpx" :src="item.cover" :lazy-load="true"></u-image>
								<view class="u-line-1 u-font-md goods-price">￥{{ Number(item.price_selling) }}</view>
								<view class="u-line-1 u-font-sm goods-title">{{ item.name }}</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 商品列表
			lists: this.$u.cache.get('homeLists', []),
			// 轮播图片
			slider: this.$u.cache.get('homeSlider', []),
			// 系统通知
			notify: this.$u.cache.get('homeNotify', []),
			notifyids: this.$u.cache.get('homeNotifyIds', []),
			// 常用功能
			icons: [
				// { icon: 'lock', title: '锁头' }, { icon: 'photo', title: '图片' }, { icon: 'hourglass', title: '沙漏' },
			]
		};
	},
	onLoad() {
		this.$u.login.init();
	},
	mounted() {
		this.load();
	},
	methods: {
		// 初始化数据
		load() {
			this.loadLists();
			this.loadNotify();
			this.loadSlider();
		},

		// 加载系统通知数据
		loadNotify() {
			let that = this;
			this.$u.get('data/api.data/getNotify').then(ret => {
				let notify = [];
				let notifyids = [];
				ret.data.list.forEach(v => {
					notify.push(v.name);
					notifyids.push(v.id);
				});
				that.$u.cache.set('homeNotify', notify);
				that.$u.cache.set('homeNotifyIds', notifyids);
				that.notify = notify;
				that.notifyids = notifyids;
			});
		},
		// 加载首页轮播图片
		loadSlider() {
			let that = this;
			let data = { keys: 'SliderHome' };
			this.$u.post('data/api.data/getSlider', data).then(ret => {
				let slider = [];
				ret.data.forEach(item => {
					slider.push({
						rule: item.rule,
						image: item.img,
						title: item.name
					});
				});
				that.$u.cache.set('homeSlider', slider);
				that.slider = slider;
			});
		},
		// 加载商品列表
		loadLists() {
			let that = this;
			this.$u.post('data/api.goods/getGoods').then(ret => {
				this.$u.cache.set('homeLists', ret.data.list);
				that.lists = ret.data.list;
			});
		},
		// 打开规则页面
		openRulePage(idx) {
			let rule = this.slider[idx].rule;
			if (rule.indexOf('NEWS#') > -1) {
				this.openNotifyPage(rule.split('NEWS#').pop());
			} else if (rule.indexOf('GOODS#') > -1) {
				this.openGoodsPage(rule.split('GOODS#').pop());
			}
		},
		// 跳转到商品详情
		openGoodsPage(code) {
			this.$u.route('pages/goods/show', {
				code: code
			});
		},
		// 打开系统通知
		openNotifyPage(index) {
			this.$u.route('pages/index/notify', {
				id: this.notifyids[index]
			});
		},
		// 下拉刷新处理
		onPullDownRefresh() {
			this.load();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
};
</script>
